import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Layout from '@/layout/index.vue'
import Login from '@/views/login/Login.vue'
import { useUserStore } from '@/stores/user'
import { getMenuList } from '@/api/login'
import { componentMap, transformRoutes } from './routerComponent'
/**
 * Note: 路由配置项
 *
 * meta : {
    noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
    title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
    icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
    breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
  }
 */
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/dashboard',
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        hidden: false,
        noCache: false,
        title: '登录',
      },
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/About.vue'),
      meta: {
        title: '关于',
        icon: 'About',
        hidden: false,
      },
    },
    {
      path: '/user',
      name: 'user',
      component: Layout,
      redirect: '/user/profile',
      children: [
        {
          path: 'profile',
          name: 'Profile',
          component: () => import('@/views/user/Profile.vue'),
          meta: {
            title: '个人中心',
            icon: 'User',
            hidden: false,
            noCache: false,
          },
        },
      ],
    },
  ],
})

// 动态路由：将菜单数据转换为路由配置，分为静态路由和动态路由
// 静态路由：在router.ts中直接配置的路由
// 动态路由：在router.ts中通过接口获取的路由
// 静态路由和动态路由的区别：
// 静态路由：在router.ts中直接配置的路由，不会随着用户权限的变化而变化
// 动态路由：在router.ts中通过接口获取的路由，会随着用户权限的变化而变化
// 动态路由的实现：
// 1. 在router.ts中通过接口获取菜单数据
// 2. 将菜单数据转换为路由配置
// 3. 将路由配置添加到路由中
// 4. 在路由守卫中判断用户是否具有访问该路由的权限
// 5. 如果用户具有访问该路由的权限，则允许访问该路由
// 6. 如果用户不具有访问该路由的权限，则不允许访问该路由
router.beforeEach(async (to, from, next) => {
  if (useUserStore().token) {
    if (to.path === '/login') {
      next('/')
      return
    }
    // 需要添加动态路由
    try {
      if (useUserStore().routesAdded) {
        next()
        return
      }
      let menuData
      if (useUserStore().menuList.length === 0) {
        const res = await getMenuList()
        useUserStore().setMenuList(res.data)
        menuData = res.data
      } else {
        menuData = useUserStore().menuList
      }

      const transformedRoutes = transformRoutes(menuData)
      transformedRoutes.forEach((item: any) => {
        router.addRoute(item)
      })

      // 添加404路由
      router.addRoute({
        path: '/:pathMatch(.*)*',
        name: '404',
        component: () => import('@/views/404.vue'),
        meta: {
          hidden: false,
          noCache: false,
          title: '404',
        },
      })

      useUserStore().setRoutesAdded(true)
      // 确保不会重复进入守卫
      next({ ...to, replace: true })
    } catch (error) {
      console.error('获取菜单失败:', error)
      next('/login')
    }
  } else {
    if (to.path === '/login') {
      next()
      return
    }
    next('/login')
  }
})
export default router
